<template>
  <div>
<!--    header -->
      <van-sticky>
          <div class="index_header">
      <van-row>
        <van-col>
            <img class="logo" src="../assets/logo.png" >
        </van-col>
        <van-col >
            <van-search class="index_header_search" v-model="value" placeholder="请输入搜索关键词" />
        </van-col>
        <van-col >
            <div class="index_header_loginBtn">登录</div>
        </van-col>
      </van-row>
	</div>
          <!--滚动tag按钮-->
      <div>
          <van-tabs>
            <van-tab v-for="(v,k) in tabBtnList" :key="k" :title="v">
            </van-tab>
          </van-tabs>
      </div>
      </van-sticky>





      <!--轮播图-->
    <div>
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(v,k) in imObj" :key="k">
              <img class="index_swipeImg" :src=v />
          </van-swipe-item>

          </van-swipe>
    </div>
<!--轮播图下广告-->
    <div>
        <van-row class="index_serviceInfo">
          <van-col span="8"><i class="icon icon_1"></i>网易自营品牌</van-col>
          <van-col span="8"><i class="icon icon_2"></i>30天无忧退货</van-col>
          <van-col span="8"><i class="icon icon_3"></i><span>48小时快速退款</span></van-col>
        </van-row>
    </div>
<!--九宫格按钮-->
      <div >
          <van-grid :column-num="5" >
              <van-grid-item v-for="(n,idx) in goodsObj" :key=idx >

                  <img class="grid-item-img" :src="n.imgurl" >
                  <div>{{n.text}}</div>
              </van-grid-item>
          </van-grid>
      </div>

<!--类目热销榜-->
      <div class="category_hot_sell">
          <h1 >类目热销榜</h1>
          <van-grid :column-num="4" :border=false>
              <van-grid-item  v-for="(n,idx) in hotSellObj" :key=idx >
                  <div class="category_hot_sell_item" >
                      <div style="padding: 0.22rem 0 0 0">{{n.text}}</div>
                      <img  :src="n.imgUrl" >
                  </div>
              </van-grid-item>
          </van-grid>
      </div>
      <!--底部footer-->
      <div class="index_footer">
          <span class="index_footer_one">下载app</span>
          <span class="index_footer_one">电脑版</span>

      </div>
      <!--底部标签栏-->
      <footer_bar></footer_bar>
  </div>
</template>

<script>
import axios from 'axios'
import footer_bar from './footer_bar'

export default {
    name: 'app_index',
    components:{footer_bar,},
    data () {
    return {
        value: '',
        tabBtnList:'',
        imObj:'',
        goodsObj:'',
        hotSellObj:[
            {
                imgUrl:require('../assets/21.png'),
                text:'美食酒水榜'
            },{
                imgUrl:require('../assets/22.png'),
                text:'个护清洁榜'
            },{
                imgUrl:require('../assets/23.png'),
                text:'数码家电榜'
            },{
                imgUrl:require('../assets/24.png'),
                text:'母婴亲子榜'
            },{
                imgUrl:require('../assets/25.png'),
                text:'运动旅行榜'
            },{
                imgUrl:require('../assets/26.png'),
                text:'宠物生活榜'
            },{
                imgUrl:require('../assets/27.png'),
                text:'严选全球榜'
            },
        ],
        active: 0,
    }
  },

    created(){
      // 顶部分类标签api
         axios.get('http://124.223.98.52:1234/get_tab_btnlist').then(
             _d =>{
                 // console.log(_d.data);
                 this.tabBtnList = _d.data
             });

         // 轮播图接口
         axios.get('http://124.223.98.52:1234/get_swipelsit').then(
             _d =>{
                 this.imObj = _d.data;
                 //console.log(_d.data);
             });

        //商品分类接口
         axios.get('http://124.223.98.52:1234/get_goodslist').then(
             _d =>{
                 this.goodsObj = JSON.parse(JSON.stringify(_d.data));
                 console.log(this.goodsObj);
             });
      }
}
</script>

<style scoped>
.logo{
    width: 1.84rem;display: inline-block;
    margin: 0.45rem 0 0 .3rem;
}
.index_header{
    background-color: white;
}
.index_header_search{
    width: 6rem;
}

.van-search__content{
    border-radius: .16rem;
    background-color:rgb(237 237 237);
}
.index_header_loginBtn{
    color:#e82e2e;
    margin: .38rem 0 0 .32rem;
    border-radius: .08rem;
    line-height: .4rem;
    font-size: .33rem;
    text-align: center;
    border:1px solid #e82e2e;
    padding:  0 0.08rem 0 0.08rem;

}
.index_swipeImg{
    height: auto;
    width: 100%;

}

.index_serviceInfo{
    text-align: center;
    line-height: .96rem;
}
.index_serviceInfo i.icon{
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100%;
    width: .45rem;height: .45rem;
    vertical-align: middle;
    text-align:center;
}

.icon_1{
    background-image: url("../assets/1.png");
}
.icon_2{
    background-image: url("../assets/2.png");
}
.icon_3{
    background-image: url("../assets/3.png");
}

.grid-item-img{
    width: 1.1rem;
    height: 1.1rem;
}

.category_hot_sell{
    padding: .35rem;
}
.category_hot_sell h1{
    font-size: .42rem;
}
.category_hot_sell_item img{
    width: 1.7rem;
    height: 1.7rem;
}

.category_hot_sell_item{
    padding: 0.08rem;
    background-color: #f5f5f5;
}
.index_footer{
    height: 3.4rem;
    background-color: rgb(65 65 65);
    font-size: 1.5rem;
    color: wheat;
    text-align: center;

}
.index_footer_one{
    border:1px solid wheat;
    border-radius: .09rem;
    padding: .08rem;
}

    .van-grid-item__content van-grid-item__content--center{
        padding: 0;
    }
</style>
